<!DOCTYPE html>
<html lang="en-us">

    <head>
	<meta name="generator" content="Hugo 0.74.2" />
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<meta name="description" content="Website Description">
<title>
Introduction
</title>

<link href="/index.xml" rel="alternate" type="application/rss+xml" title="Introduction" />

        <meta property="og:title" content="Introduction" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Website Description"/>
<meta property="og:url" content="http://example.com/"/>
<meta property="og:site_name" content="Introduction"/>




<meta property="og:image" content="http://example.com/home/profile.jpg"/>




        
<link rel="shortcut icon" href="/img/fav.ico">


        





<link rel="stylesheet" href="/css/main.min.daa833377fb1636f8cbfa65c601050bb5475623deb7aa6e6fdde94a064a6185d.css" integrity="sha256-2qgzN3&#43;xY2&#43;Mv6ZcYBBQu1R1Yj3reqbm/d6UoGSmGF0=" crossorigin="anonymous" media="screen">





        


<link rel="stylesheet" href="http://example.com/styles/owlCarousel.min.b1f26e29c43c61fe8b5a6f225b4ee7c5f969a7b33cfe512706271e07246d93d1.css" integrity="sha256-sfJuKcQ8Yf6LWm8iW07nxflpp7M8/lEnBiceByRtk9E=" crossorigin="anonymous" media="screen">

    </head>

    <body>
        
        <section id="top" class="hero is-fullheight">
            
            <div class="hero-head"></div>

            
            <div class="hero-body">
                <div class="container has-text-centered">
                    
                    <h1 class="bold-title fade-in one">
                        Hi, I&rsquo;m Introduction
                    </h1>
                    <div class="subtitle is-3 fade-in two">
                        <p>I&rsquo;m a theme for Hugo</p>

                    </div>
                    
                    
                    <div class="fade-in three">
                        <div class="social-icons">
    
    <a href="https://twitter.com/" >
        <i class="fab fab fa-twitter"></i>
    </a>
    
    <a href="https://facebook.com/" >
        <i class="fab fab fa-facebook-f"></i>
    </a>
    
    <a href="https://linkedin.com/" >
        <i class="fab fab fa-linkedin-in"></i>
    </a>
    
    <a href="mailto:youremail@email.com" >
        <i class="fas fab fa-paper-plane"></i>
    </a>
    
    <a href="https://mastodon.social/" rel="me">
        <i class="fab fab fa-mastodon"></i>
    </a>
    
</div>

                    </div>
                    
                </div>
            </div> 
            

            <div class="hero-foot fade-in three">
                
                
<div class="container">
    <hr>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        
        <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false" >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
        <div class="navbar-menu has-content-centered" id="navMenu">
            
            
            
            

            
            

            
                
            

            
                
            

            
            
            
            
            
            <a class="navbar-item" href="#about">About</a>
            
            
            
            
            
                
                
                <a class="navbar-item" href="/#projects">Projects</a>
                
            
            
            
            
            
                
                
                <a class="navbar-item" href="/#blog">Blog</a>
                
            
            
            
            
            
            <a class="navbar-item" href="#lorem">Lorem Ipsum</a>
            
            
            
            

            
            
            <a class="navbar-item" href="#contact">Contact</a>
            
            

            
            
            
            
            <a class="navbar-item" href="http://example.com/es/">Español</a>
            
            
            
            <a class="navbar-item" href="http://example.com/de/">Deutsch</a>
            
            

            
            
        </div>
    </nav>
    <hr>
</div>


            </div>
        </section> 

        
        
        

        
            
        

        
            
        

        
        
        
        
        
        

        
        <div class="section" id="about">
            <div class="container">
                <h2 class="title is-2 has-text-centered">About</h2>
                
                <div class="columns">
                    <div class="column is-one-third has-text-centered">
                        
                        
                        <img class="img-responsive avatar" src="http://example.com/home/profile_hu3d03a01dcc18bc5be0e67db3d8d209a6_16363_320x0_resize_q75_box.jpg" alt="profile.jpg">
                        
                        
                    </div>
                    <div class="markdown column">
                        <p>This is <strong>Introduction</strong>, a minimalist website theme made for <a href="https://gohugo.io">Hugo</a>.</p>
<h3 id="features">Features</h3>
<ul>
<li>Responsive display on any size screen</li>
<li>Light and Dark themes right out of the box</li>
<li>Multilingual - supports side-by-side content in multiple languages</li>
<li>Any number of custom index page sections from Markdown files</li>
<li><em>Projects</em> section with any number of projects: highly configurable as a photo gallery, modals, or external links</li>
<li><em>Blog</em> section with optional <em>Latest Post</em>, on the main page or as a separate section</li>
<li>Styled Markdown throughout with support for Hugo&rsquo;s syntax highlighting</li>
</ul>

                    </div>
                </div>
                
            </div>
            
            <div class="container has-text-centered top-pad">
    <a href="#top">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>

        </div>
        <div class="container">
            <hr>
        </div>
        
        
        
        
        
        
        
            
            
<div class="section" id="projects">
    
    <div class="container">
        <h2 class="title is-2 has-text-centered">
            Projects
        </h2>
        <div class="section">
            <div class="columns is-multiline">
                
                
                
                
                
                
                <div class="column is-one-third">
                    <div class="card" data-target="#project-0">
                        <div class="card-image">
                            <figure class="image is-3by2">
                                <a >
                                    
                                    
                                    
                                    <img class="card-thumbnail" src="http://example.com/projects/photography/camera_hu3d03a01dcc18bc5be0e67db3d8d209a6_30380_302x0_resize_q75_box.jpg" alt ="camera.jpg">
                                    
                                    
                                </a>
                            </figure>
                        </div>
                        <div class="card-content has-text-centered top-pad">
                            <a >
                                Photography
                            </a>
                        </div>
                    </div>
                </div>
                
                
                
                
                <div class="column is-one-third">
                    <div class="card" data-target="#project-1">
                        <div class="card-image">
                            <figure class="image is-3by2">
                                <a >
                                    
                                    
                                    
                                    <img class="card-thumbnail" src="http://example.com/projects/design/plant_hu3d03a01dcc18bc5be0e67db3d8d209a6_34602_302x0_resize_q75_box.jpg" alt ="plant.jpg">
                                    
                                    
                                </a>
                            </figure>
                        </div>
                        <div class="card-content has-text-centered top-pad">
                            <a >
                                Design
                            </a>
                        </div>
                    </div>
                </div>
                
                
                
                
                <div class="column is-one-third">
                    <div class="card" data-target="#project-2">
                        <div class="card-image">
                            <figure class="image is-3by2">
                                <a >
                                    
                                    
                                    
                                    <img class="card-thumbnail" src="http://example.com/projects/writing/workday_hu3d03a01dcc18bc5be0e67db3d8d209a6_59645_302x0_resize_q75_box.jpg" alt ="workday.jpg">
                                    
                                    
                                </a>
                            </figure>
                        </div>
                        <div class="card-content has-text-centered top-pad">
                            <a >
                                Writing
                            </a>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
    
    
    
    
    <div class="modal" id="project-0">
        <div class="modal-background"></div>
        <div class="modal-card">
            
            <header class="modal-card-header bottom-pad">
                <p class="modal-card-title has-text-centered">Photography</p>
            </header>
            

            
            
            
            <div class="owl-carousel owl-theme">
            
                
                    
                    
                    <div class="item owl-height">
                    
                        <img src="http://example.com/projects/photography/camera_hu3d03a01dcc18bc5be0e67db3d8d209a6_30380_640x0_resize_q75_box.jpg" class="img-responsive" alt="camera.jpg">
                    
                    </div>
                    
                
                    
                    
                    <div class="item owl-height">
                    
                        <img src="http://example.com/projects/photography/erik-jan-leusink-180382-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_82088_640x0_resize_q75_box.jpg" class="img-responsive" alt="erik-jan-leusink-180382-unsplash.jpg">
                    
                    </div>
                    
                
                    
                    
                    <div class="item owl-height">
                    
                        <img src="http://example.com/projects/photography/lorene-farrugia-JpmC-tAHiVA-unsplash_hu5e0d05c41608c807d4e7962ffe4f3978_970605_640x0_resize_q75_box.jpg" class="img-responsive" alt="lorene-farrugia-JpmC-tAHiVA-unsplash.jpg">
                    
                    </div>
                    
                
                    
                    
                    <div class="item owl-height">
                    
                        <img src="http://example.com/projects/photography/mario-ho-277298-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_19450_640x0_resize_q75_box.jpg" class="img-responsive" alt="mario-ho-277298-unsplash.jpg">
                    
                    </div>
                    
                
                    
                    
                    <div class="item owl-height">
                    
                        <img src="http://example.com/projects/photography/tyler-lastovich-285380-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_20716_640x0_resize_q75_box.jpg" class="img-responsive" alt="tyler-lastovich-285380-unsplash.jpg">
                    
                    </div>
                    
                
            
            </div>
            
            

            
            <section class="modal-card-body markdown">
                <h2 id="sometimes-i-take-pictures">Sometimes I take pictures</h2>
<p>This project is about the pictures I take. Sometimes, they are pictures of cats.</p>

            </section>
            
        </div>
        <button class="modal-close is-large" aria-label="close" data-target="#project-0"></button>
    </div>
    
    
    
    <div class="modal" id="project-1">
        <div class="modal-background"></div>
        <div class="modal-card">
            
            <header class="modal-card-header bottom-pad">
                <p class="modal-card-title has-text-centered">Design</p>
            </header>
            

            
            
            
                
                    
                    
                        <img src="http://example.com/projects/design/plant_hu3d03a01dcc18bc5be0e67db3d8d209a6_34602_640x0_resize_q75_box.jpg" class="img-responsive" alt="plant.jpg">
                    
                
            
            

            
            <section class="modal-card-body markdown">
                <p>This theme was designed by <a href="https://victoria.dev">Victoria Drake</a>. Go on, explore! 💪</p>
<p>If you want to use it for your website, check out the section at the bottom of the main page. 👍</p>

            </section>
            
        </div>
        <button class="modal-close is-large" aria-label="close" data-target="#project-1"></button>
    </div>
    
    
    
    <div class="modal" id="project-2">
        <div class="modal-background"></div>
        <div class="modal-card">
            
            <header class="modal-card-header bottom-pad">
                <p class="modal-card-title has-text-centered">Writing</p>
            </header>
            

            
            
            
                
                    
                    
                        <img src="http://example.com/projects/writing/workday_hu3d03a01dcc18bc5be0e67db3d8d209a6_59645_640x0_resize_q75_box.jpg" class="img-responsive" alt="workday.jpg">
                    
                
            
            

            
            <section class="modal-card-body markdown">
                <p>Aromatic aroma con panna, crema so coffee robust coffee barista, café au lait trifecta that strong blue mountain cortado aftertaste. Aroma extraction french press, skinny sweet, blue mountain cup roast barista, beans, extra cappuccino mug crema strong.</p>
<p>To go viennese cream to go, flavour, so mocha as, carajillo iced et a siphon froth. Aged, eu, cup, brewed aroma kopi-luwak, coffee, id viennese french press brewed grounds acerbic froth. Decaffeinated acerbic, spoon beans seasonal, french press café au lait mazagran roast chicory, pumpkin spice galão as fair trade, dark irish cup ristretto half and half whipped shop. Latte instant black extra aroma, instant, extra robusta variety skinny shop aged cup ristretto foam cortado. Bar galão skinny saucer est affogato sugar caffeine chicory sugar coffee, seasonal barista french press acerbic in chicory robust.</p>

            </section>
            
        </div>
        <button class="modal-close is-large" aria-label="close" data-target="#project-2"></button>
    </div>
    
    
    <div class="container has-text-centered top-pad">
    <a href="#top">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>

</div>

<div class="container"><hr></div>


        
        
        
        
        
        
        
            
            
<div class="section" id="blog">
    
    <div class="container">
        
        <h2 class="title is-2 has-text-centered">Latest Post</h2>
            
            <div class="summary">Jul 25, 2020
                <h3 class="title is-3 latest-post-title"><a href="http://example.com/blog/configuration/">Theme Features</a></h3>
                    <div class="markdown">
                    Here are some helpful tips for setting up this theme.
Syntax Highlighting Introduction allows the use of Hugo&rsquo;s rich built-in syntax highlighting capabilities. See Syntax Highlighting in the Hugo docs.
Below is an example configuration for Highlight. See Highlight in the Hugo docs for more.
[markup] [markup.highlight] codeFences = true guessSyntax = false hl_Lines = &#34;&#34; lineNoStart = 1 lineNos = false lineNumbersInTable = true noClasses = true # For styles, see https://xyproto.
                    
                    <a href="http://example.com/blog/configuration/">Read more</a>
                    
                    </div>
            </div>
            
        
        
        <div class="container has-text-centered top-pad">
            <a href="http://example.com/blog/">All Posts</a>
        </div>
        
    </div>
    
    <div class="container has-text-centered top-pad">
    <a href="#top">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>

</div>

<div class="container"><hr></div>


        
        
        
        
        
        
        

        
        <div class="section" id="lorem">
            <div class="container">
                <h2 class="title is-2 has-text-centered">Lorem Ipsum</h2>
                
                <div class="markdown has-text-centered">
                    <p>You can add more sections to the home page by adding files to the <code>/content/home/</code> folder.</p>

                </div>
                
            </div>
            
            <div class="container has-text-centered top-pad">
    <a href="#top">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>

        </div>
        <div class="container">
            <hr>
        </div>
        
        
        
        
        
        
        <div class="section" id="contact">
            <div class="container has-text-centered">
                <h2 class="title is-2">Contact</h2>
                <div class="markdown">
                    <p>In the Contact section of <strong>Introduction</strong>, you may optionally display the current time in your preferred timezone.</p>
<p>This lets visitors know what sort of response time to expect when they contact you. The timezone is easily set in the <code>config.toml</code> file.</p>

                </div>
                
                <p>My current local time is <span id="time" data-time-zone="America/Los_Angeles" data-time-format="h:mm A"></span>.</p>
                
                
                <h3 class="subtitle is-3 has-text-centered top-pad">
                    <a href="mailto:youremail@email.com">youremail@email.com</a>
                </h3>
                
                <div class="social-icons">
    
    <a href="https://twitter.com/" >
        <i class="fab fab fa-twitter"></i>
    </a>
    
    <a href="https://facebook.com/" >
        <i class="fab fab fa-facebook-f"></i>
    </a>
    
    <a href="https://linkedin.com/" >
        <i class="fab fab fa-linkedin-in"></i>
    </a>
    
    <a href="mailto:youremail@email.com" >
        <i class="fas fab fa-paper-plane"></i>
    </a>
    
    <a href="https://mastodon.social/" rel="me">
        <i class="fab fab fa-mastodon"></i>
    </a>
    
</div>

            </div>
            
            <div class="container has-text-centered top-pad">
    <a href="#top">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>

        </div>
        <div class="container">
            <hr>
        </div>
        
        
        

        <div class="section" id="footer">
    <div class="container has-text-centered">
    
        <span class="footer-text">
            <a href="https://github.com/victoriadrake/hugo-theme-introduction/"><strong>Introduction</strong></a> theme for <a href="http://gohugo.io/">Hugo</a>. Made with <a href="https://victoria.dev"><i class="fa fa-heart"></i> and <i class="fa fa-coffee"></i></a> by open source contributors.
        </span>
    
    </div>
</div>


        
        


<script src="http://example.com/js/bundle.e6934e69d06bb8a213134f4c1468f9478bb7755e786dfb60e3c5a917c5335805.js" integrity="sha256-5pNOadBruKITE09MFGj5R4u3dV54bftg48WpF8UzWAU="></script>



        


<script src="http://example.com/js/bundleOwlCarousel.afccb665ffddf92101a8bc04b924a4a5b9a36c0ad0ad61024da751cdd8fd1ed9.js" integrity="sha256-r8y2Zf/d&#43;SEBqLwEuSSkpbmjbArQrWECTadRzdj9Htk="></script>


        
        
        
        
        
        
        <script src="http://example.com/js/bundleMoment.00f097d38e126139c76cdebf43c20ec084dd5db287b651f3607b0a7239b5958e.js" integrity="sha256-APCX044SYTnHbN6/Q8IOwITdXbKHtlHzYHsKcjm1lY4="></script>
        
    </body>

</html>
